<%@ page import="com.cnc.utils.ResourceUtil" %><%--
  Created by IntelliJ IDEA.
  User: finder
  Date: 2021/10/13
  Time: 10:05
  To change this template use File | Settings | File Templates.
--%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src='jquery-3.6.0.js'></script>
    <script>
        function delete_selected() {
            var value="";
            $("input[class='delete']").each(function(index,element){
                if($(element).prop("checked")){
                    value+=$(element).val()+",";
                }
            });
            location = "./StudentServlet?flag=delete&sids="+value;
        }
        function add() {
            var name = $("#name").val();
            var age = $("#age").val();
            var gender;
            if($("#man").prop("checked")){
                gender = "男";
            }else {
                gender = "女";
            }
            var email = $("#email").val();
            location = "./StudentServlet?flag=add&sname=" + name + "&sage=" + age + "&sgender=" + gender + "&semail=" + email;
        }
        $(function () {
            $("div").click(function () {
                var nownode = $(this);
                var parentnode = nownode.parent();
                var td=parentnode.parent().children();
                var Sid=td[1].innerText;
                var key=nownode.prop("class");
                var newnode = $("<input type='text' value='" + nownode.text() + "'>");
                parentnode.append(newnode);
                newnode.focus().select();
                nownode.remove();
                $("input").blur(function () {
                    var nownode = $(this);
                    var parentnode = nownode.parent();
                    var newnode = $("<div>" + nownode.val() + "</div>");
                    parentnode.append(newnode);
                    nownode.remove();
                    location = "./StudentServlet?flag=updateByKey&sid="+Sid+"&key="+key+"&value="+newnode.text();
                });
            });
            $("a[class='foot']").click(function(){
                var name=$("form>input[name='name']").val();
                var Max=$("form>input[name='Max']").val();
                var Min=$("form>input[name='Min']").val();
                var gender=$("form>select").val();
                var flag=$(this).text();
                if(flag=="首页"){
                    location = "StudentServlet?flag=show&page=1&name="+name+"&Max="+Max+"&Min="+Min+"&gender="+gender;
                }else if(flag=="上一页"){
                    location = "StudentServlet?flag=show&page=${pu.prevPage}&name="+name+"&Max="+Max+"&Min="+Min+"&gender="+gender;
                }else if(flag=="下一页"){
                    location = "StudentServlet?flag=show&page=${pu.nextPage}&name="+name+"&Max="+Max+"&Min="+Min+"&gender="+gender;
                }else if(flag=="尾页"){
                    location = "StudentServlet?flag=show&page=${pu.countPage}&name="+name+"&Max="+Max+"&Min="+Min+"&gender="+gender;
                }
            });
            $("th>input").click(function(){
                var val=$(this).prop("checked")
                $("input[class='delete']").each(function(index,element){
                    $(element).prop("checked",val);
                });
            });
        });
    </script>
    <style>
        form{
            width: 90%;

            margin: 10px auto;

            text-align: right;

        }
        table {

            width: 90%;

            background: #ccc;

            margin: 10px auto;

            border-collapse: collapse;

        }

        th,td {

            height: 25px;

            line-height: 25px;

            text-align: center;

            border: 1px solid #ccc;

        }

        th {

            background: #eee;

            font-weight: normal;

        }

        tr {

            background: #fff;

        }

        tr:hover {

            background: #C3ECFF;

        }

        td a {

            color: #06f;

            text-decoration: none;

        }

        td a:hover {

            color: #06f;

            text-decoration: underline;

        }
        input{
            border: 1px solid #ccc;
            padding: 3px 0px;
            margin-right: 20px;
            border-radius: 3px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
        }
        input:focus{
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }
        #submit_btn{
            width:65px;
            background:url(img/search.png);
            background-size:100% 100%;
            border-radius: 20%;
            margin-left: 20px;
            margin-right: 0px;
            vertical-align: middle;
        }
        input[name="Min"]{
            width:30px;
            margin-right: 0px;
        }
        input[name="Max"]{
            width:30px;
        }
        span{
            position: absolute;
            top: 10px;
            left:5%;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<span>${sessionScope.login},欢迎登陆！</span>
<form action="StudentServlet" method="post">
    <input type="text" name="flag" value="show" hidden>
    <input type="text" name="sign" value="search" hidden>
    姓名：<input type="text" name="name" value="${requestScope.su.name}">
    年龄：<input type="text" name="Min" value="${requestScope.su.min}">~<input type="text" name="Max" value="${requestScope.su.max}">
    性别：<select name="gender">
        <option value="%" ${requestScope.su.gender=="%"?"selected":""}>全部</option>
        <option value="男" ${requestScope.su.gender=="男"?"selected":""}>男</option>
        <option value="女" ${requestScope.su.gender=="女"?"selected":""}>女</option>
    </select>
    <input type="submit" value="" id ="submit_btn" >
</form>
<table>
    <thead>
    <tr>
        <th><input type="checkbox"></th>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>邮箱</th>
        <th>头像</th>
        <th colspan="2"><a href="add.jsp?sid=${requestScope.MaxId}">详细添加</a></th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var="list" items="${requestScope.list}">
        <tr>
            <td><input type="checkbox" value="${list.sid}" class="delete"></td>
            <td><div class="sid">${list.sid}</div></td>
            <td><div class="sname">${list.sname}</div></td>
            <td><div class="sage">${list.sage}</div></td>
            <td><div class="sgender">${list.sgender}</div></td>
            <td><div class="semail">${list.semail}</div></td>
            <td><img src="../<%=ResourceUtil.getPath()%>/${list.photo}" height="60"></td>
            <td><a href="./edit.jsp?sid=${list.sid}">详细信息</a></td>
            <td><a href="StudentServlet?flag=delete&sid=${list.sid}">删除</a></td>
        </tr>
    </c:forEach>
    <tr>
        <td><a href='javascript:;' onclick='delete_selected()'>批量删除</a></td>
        <td><input type='text' id='id' value="${requestScope.MaxId}" readonly></td>
        <td><input type='text' id='name'></td>
        <td><input type='text' id='age'></td>
        <td>
            男<input type='radio' name="gender" id='man' checked>
            女<input type='radio' name="gender" id='women'>
        </td>
        <td><input type='text' id='email'></td>
        <td><img src="../<%=ResourceUtil.getPath()%>/<%=ResourceUtil.getImg()%>" height="60"></td>
        <td colspan="2"><a href='javascript:;' onclick='add()'>快速添加</a></td>
    </tr>
    <tr>
        <td colspan="9" style="text-align: right">
            <a href='javascript:;' class="foot">首页</a>
            <a href='javascript:;' class="foot">上一页</a>
            ${pu.page}/${pu.countPage}
            <a href='javascript:;' class="foot">下一页</a>
            <a href='javascript:;' class="foot">尾页</a>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>